{% extends "layout.html" %}

{% block extra_css %}
<style>
    /* 榜单专用样式 */
    .ranking-container {
        max-width: 1200px;
        margin: 2rem auto;
        padding: 0 1rem;
    }
    
    .ranking-header {
        text-align: center;
        margin-bottom: 2.5rem;
    }
    
    .ranking-title {
        font-size: 2.5rem;
        font-weight: 700;
        color: #1f2937;
        margin-bottom: 1rem;
        background: linear-gradient(90deg, #3b82f6, #10b981);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    
    .ranking-subtitle {
        font-size: 1.1rem;
        color: #6b7280;
        max-width: 700px;
        margin: 0 auto;
        line-height: 1.6;
    }
    
    .ranking-list {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
        gap: 2rem;
    }
    
    .ranking-card {
        background: white;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    
    .ranking-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    }
    
    .card-badge {
        position: absolute;
        top: 1rem;
        left: 1rem;
        background: rgba(0, 0, 0, 0.7);
        color: white;
        padding: 0.25rem 0.75rem;
        border-radius: 20px;
        font-weight: 600;
        font-size: 0.9rem;
        z-index: 2;
    }
    
    .card-image {
        height: 200px;
        width: 100%;
        object-fit: cover;
    }
    
    .card-content {
        padding: 1.5rem;
    }
    
    .card-title {
        font-size: 1.3rem;
        font-weight: 600;
        color: #1f2937;
        margin-bottom: 0.5rem;
    }
    
    .card-location {
        display: flex;
        align-items: center;
        color: #3b82f6;
        font-size: 0.9rem;
        margin-bottom: 0.75rem;
    }
    
    .card-location svg {
        width: 16px;
        height: 16px;
        margin-right: 0.25rem;
    }
    
    .card-stats {
        display: flex;
        gap: 1rem;
        margin-bottom: 1rem;
    }
    
    .stat-item {
        display: flex;
        align-items: center;
        font-size: 0.85rem;
        color: #6b7280;
    }
    
    .stat-item svg {
        width: 16px;
        height: 16px;
        margin-right: 0.25rem;
        color: #9ca3af;
    }
    
    .card-description {
        color: #4b5563;
        line-height: 1.6;
        font-size: 0.95rem;
        margin-bottom: 1.25rem;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    
    .card-actions {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .difficulty {
        display: inline-block;
        padding: 0.25rem 0.75rem;
        border-radius: 20px;
        font-size: 0.8rem;
        font-weight: 500;
    }
    
    .difficulty-easy {
        background-color: #ecfdf5;
        color: #059669;
    }
    
    .difficulty-medium {
        background-color: #eff6ff;
        color: #2563eb;
    }
    
    .difficulty-hard {
        background-color: #fef2f2;
        color: #dc2626;
    }
    
    .view-btn {
        padding: 0.5rem 1rem;
        background-color: #3b82f6;
        color: white;
        border-radius: 6px;
        font-size: 0.9rem;
        font-weight: 500;
        transition: background-color 0.2s;
    }
    
    .view-btn:hover {
        background-color: #2563eb;
    }
    
    @media (max-width: 768px) {
        .ranking-list {
            grid-template-columns: 1fr;
        }
        
        .ranking-title {
            font-size: 2rem;
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="ranking-container">
    <div class="ranking-header">
        <h1 class="ranking-title">江浙沪十大经典徒步路线</h1>
        <p class="ranking-subtitle">精选长三角地区最受欢迎的徒步路线，从入门级到挑战级，探索山水之间的自然之美</p>
    </div>
    
    <div class="ranking-list">
        {% for route in routes %}
        <div class="ranking-card">
            <div class="card-badge">TOP {{ loop.index }}</div>
            <img src="{{ url_for('static', filename='images/' + route.image) }}" alt="{{ route.name }}" class="card-image">
            <div class="card-content">
                <h3 class="card-title">{{ route.name }}</h3>
                <div class="card-location">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
                        <circle cx="12" cy="10" r="3"></circle>
                    </svg>
                    {{ route.address }}
                </div>
                <div class="card-stats">
                    <div class="stat-item">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z"></path>
                            <line x1="4" y1="22" x2="4" y2="15"></line>
                        </svg>
                        {{ route.length }}
                    </div>
                    <div class="stat-item">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <circle cx="12" cy="12" r="10"></circle>
                            <polyline points="12 6 12 12 16 14"></polyline>
                        </svg>
                        {{ route.duration }}
                    </div>
                </div>
                <p class="card-description">
                    {{ route.description }}
                </p>
                <div class="card-actions">
                    {% if route.difficulty == '入门级' %}
                        <span class="difficulty difficulty-easy">{{ route.difficulty }}</span>
                    {% elif route.difficulty == '中级' %}
                        <span class="difficulty difficulty-medium">{{ route.difficulty }}</span>
                    {% else %}
                        <span class="difficulty difficulty-hard">{{ route.difficulty }}</span>
                    {% endif %}
                    <a href="#" class="view-btn">查看详情</a>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
// 可以添加卡片点击效果或其他交互
$(document).ready(function() {
    $('.ranking-card').on('click', function(e) {
        // 如果不是点击按钮，则跳转到详情页
        if (!$(e.target).closest('.view-btn').length) {
            window.location = $(this).find('.view-btn').attr('href');
        }
    });
});
</script>
{% endblock %}